<template>
         <!--面包屑-->
<div style="margin-bottom: 30px">
 <el-breadcrumb separator="/">
   <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
   <el-breadcrumb-item>
      <router-link to="/FuelCostList">油费管理</router-link>
   </el-breadcrumb-item>
   <el-breadcrumb-item>新增油费</el-breadcrumb-item>
 </el-breadcrumb></div>
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="form" :rules="rules" label-width="auto"
        class="demo-ruleForm" :size="formSize" status-icon>
        <el-form-item label="车牌号：" prop="licensePlateNumber">
            <el-input v-model="form.licensePlateNumber" placeholder="请输入车牌号" />
        </el-form-item>
       
        <el-form-item label="加油费用/元:" prop="fuelCostPerLiter">
            <el-input v-model="form.fuelCostPerLiter" placeholder="请输入加油费用" />
        </el-form-item>
       
        <el-form-item label="加油量/L:" prop="refuelingQuantity">
            <el-input v-model="form.refuelingQuantity" placeholder="请输入加油量" />
        </el-form-item>
       <el-form-item label="起始公里数:" prop="startingKilometers">
            <el-input v-model="form.startingKilometers" placeholder="请输入起始公里数" />
        </el-form-item>
               <el-form-item label="支付方式:" prop="payMethod">
            <el-radio-group v-model="form.payMethod">
      <el-radio value="1" size="large">微信支付</el-radio>
      <el-radio value="2" size="large">支付宝支付</el-radio>
      <el-radio value="3" size="large">银联支付</el-radio>
      <el-radio value="4" size="large">企业转账</el-radio>
      <el-radio value="5" size="large">线下支付</el-radio>
      <div>
          <el-radio value="6" size="large">其他</el-radio>
        <el-input v-if="form.payMethod === '6'" v-model="form.otherPayMethod" placeholder="请输入其他支付方式" />
      </div>
    </el-radio-group>
        </el-form-item>
               <el-form-item label="经办人:" prop="handledBy">
            <el-input v-model="form.handledBy" placeholder="请输入经办人" />
        </el-form-item>
       
        <el-form-item label="备注:" prop="fuelCostNotes">
            <el-input v-model="form.fuelCostNotes" type="textarea" placeholder="请输入备注" />
        </el-form-item>
            
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                提交
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        </el-form-item>
    </el-form>
</template>
<script lang="ts" setup>
//组件
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
//变量
const form= reactive({
  "licensePlateNumber": "",
  "fuelCostPerLiter": "",
  "refuelingQuantity": "",
  "startingKilometers": "",
  "payMethod": "",
  "otherPayMethod": "",
  "handledBy": "",
  "fuelCostNotes": ""
})
//方法
//添加油费信息
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import  { ElMessage} from 'element-plus'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
//验证
const rules = reactive<FormRules>({
    licensePlateNumber: [
        { required: true, message: '车牌号不能为空', trigger: 'blur' },
        
    ],
    fuelCostPerLiter: [
        { required: true, message: '加油费用/元不能为空', trigger: 'blur' },
        
    ],
    refuelingQuantity: [
        { required: true, message: '加油量/升不能为空', trigger: 'blur' },
        
    ],

    startingKilometers: [
        { required: true, message: '起始公里数不能为空', trigger: 'blur' },
        
    ],
    payMethod: [
        { required: true, message: '支付方式不能为空', trigger: 'blur' },
        
    ],
    handledBy: [
        { required: true, message: '经办人不能为空', trigger: 'blur' },
        
    ],
        
})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
           
            axios.post("/bwrite/api/FuelCost/CreateFuelCost", form).then(ter => {
                if (ter.data.code > 0) {
                    ElMessage.success("添加成功")
                  router.push("/FuelCostList")
                } else {
                    ElMessage.error("添加失败")
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
//钩子函数
onMounted(async () => {
   
})
</script>


